<template>
  <div class="m-list-wrap">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="出发地"
        width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.startAddr }}</span>
        </template>
      </el-table-column>

    <el-table-column
      label="途径地"
      >
      <template slot-scope="scope">
        <span>{{ scope.row.midAddr }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="是否设置为热门"
      >
      <template slot-scope="scope">
        <span>{{ scope.row.isTop ? '是' : '否' }}</span>
      </template>
    </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import api from '@/fetch/api.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    mounted(){
      this.getRouteslist()
    },
    methods: {
      deleteFn(params){
        api.mRouteDelete(params)
        .then(res => {
          if(res.code===1){
            console.log('zcj2')
            this.$message({
              type: 'success',
              message: res.msg
            });
           this.tableData.splice(params.index,1)
          }else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        })
      },
      getRouteslist(){
        api.mRouteList()
        .then(res=>{
          if(res.code===1){
            // success
            let _data = res.data
            _data.map(item=>{
              let midAddrStr = []
              let midAddr = JSON.parse(item.midAddr)
              for(let i in midAddr){
                let _name = midAddr[i]['name']
                midAddrStr.push(_name)
              }
              if(midAddrStr.length){
                item.midAddr = midAddrStr.join(',')
              }
              return item
            })
            this.tableData = _data
          }else{
             this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        })
      },
      handleEdit(row) {
        // 路由跳转
        this.$router.push({ name: 'MpathEdit', params: { id: row.id }})
      },
      handleDelete(index, row) {
        const _id = row.id
        this.$confirm('此操作将永久删除该路线, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(()=>{
          // 删除操作
          this.deleteFn({id:_id,index})
        })
       .catch(() => {});
      }
    }
  }
</script>

<style>
.m-list-wrap{
  padding: 10px 20px;
}
</style>
